﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="webChart.aspx.cs" Inherits="Demos_webChart" %>

<%@ Register Assembly="DevExpress.Web.v14.1, Version=14.1.8.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web.ASPxGridView" TagPrefix="dx" %>

<%@ Register Assembly="DevExpress.Web.ASPxTreeList.v14.1, Version=14.1.8.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web.ASPxTreeList" TagPrefix="dx" %>

<%@ Register Assembly="DevExpress.XtraCharts.v14.1.Web, Version=14.1.8.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.XtraCharts.Web" TagPrefix="dxchartsui" %>

<%@ Register assembly="DevExpress.XtraCharts.v14.1, Version=14.1.8.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.XtraCharts" tagprefix="cc1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>test</title>
     <style type="text/css">
         .mystyle:visited {
             height: 100%;
             width:100%;
         } 
         .fullwidth {
             width: 100%;
             height: 100%;
         }
    </style>
    <script type="text/javascript">
        function Resized() {
        var callbackState = window.document.form1.elements['callbackState'].value;
        if (callbackState == 0)
            DoCallback();
        }

        function DoCallback(){
            window.document.form1.elements['chartWidth'].value = document.body.offsetWidth;
            chart.PerformCallback();
        }

        function ResizeChart(s, e) {
            window.document.form1.elements['callbackState'].value = 0;
            s.GetMainElement().style.width = window.document.form1.elements['chartWidth'].value + "px";
        }

        function ResetCallbackState() {
            window.document.form1.elements['callbackState'].value = 1;
        }
    </script>
</head>

<body onresize="Resized()" onload="DoCallback()">
    <form id="form1" runat="server">
        <div>
            <dxchartsui:WebChartControl ID="WebChartControl1" runat="server" Height="200" Width="300" ClientInstanceName="chart" DiagramTypeName="XYDiagram" ShowLoadingPanel="False"> 
   
              <SeriesSerializable>
                <cc1:Series LabelTypeName="SideBySideBarSeriesLabel" Name="Series 1" PointOptionsTypeName="PointOptions"
                    SeriesViewTypeName="SideBySideBarSeriesView">
                    <points>
<cc1:SeriesPoint Values="1" ArgumentSerializable="A"></cc1:SeriesPoint>
<cc1:SeriesPoint Values="2" ArgumentSerializable="B"></cc1:SeriesPoint>
<cc1:SeriesPoint Values="3" ArgumentSerializable="C"></cc1:SeriesPoint>
</points>
           
                </cc1:Series>
            </SeriesSerializable>
            <SeriesTemplate LabelTypeName="SideBySideBarSeriesLabel" PointOptionsTypeName="PointOptions"
                SeriesViewTypeName="SideBySideBarSeriesView">
            </SeriesTemplate>
            <ClientSideEvents EndCallback="function(s, e) {
ResizeChart(s,e);
}" BeginCallback="function(s, e) {
ResetCallbackState();
}" />


            </dxchartsui:WebChartControl>
            
            <input id="chartWidth" type="hidden" runat="server" value="400" />
            <input id="callbackState" type="hidden" runat="server" value="0" />

        </div>
        
        
        <div> 
            <dx:ASPxTreeList ID="ASPxTreeList1" runat="server" Height="300" Width="100%"></dx:ASPxTreeList>
        </div>
        <div>
            <dx:ASPxGridView ID="ASPxGridView1" runat="server" Width="100%"></dx:ASPxGridView>
        </div>
    </form>
</body>
</html>
